<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../ali/iconfont.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/queue.css"/>
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/update.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
		<style type="text/css">
			.childFooter .footerList .bg.bg_03 { background-image: url(../images/queue/fb_03.png);} 
		</style>
	</head>
	<body>
		<!--头部-->
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10 pad-r-10">
			<div class="pa back pad-l-10 back re" onclick="backpre()">
				<div class="order_back"></div>
				<a></a>
			</div>
			<div @click="test()" class="center">桌位状态</div>
			<!--<div class="pa set">
				<a href="queue_set.html" class="fff f-15 pad-r-10"><i></i></a>
			</div> -->
		</header>
		<div id="app" v-cloak="">
			<div class="wrap_body queue_tableStatus bg-e4">
				<!--内容部分-->
				<div class="pad-t-45 pad-b-80 f-15">
					<div class="pad-12 pad-t-10 pad-b-2 fiex blue">
						<i class="i mag-r-7"></i>
						<div class="bg-fff pad-10 mag-l-5 mag-r-5 sign_block"></div>表示空桌
						<div class="bg-yellow pad-10 mag-l-5 mag-r-5 sign_block"></div>表示桌子被占用
					</div>
					<div class="pad-l-12 pad-r-12" v-for="(item,index) in table">
						<div class="pad-t-15 pad-b-15 cf" :id="index">
							<div class="fl">{{item.table_cate_name}}</div>
							<div class="fr">空桌<span class="blue pad-l-10">{{item.num}}</span></div>
						</div>
						<!--餐桌状态部分-->
						<div class="cf center table_status">
							<div v-for="(v,i) in item['list']" class="item fl">
								<div class=" bg-yellow pad-10 fff pad-t-5 pad-b-5 mag-b-10 item_content" v-if="v.is_use == '1'">
									<div class="">
										<p class="ellipsis">{{v.table_name}}</p>
										<p><i class="bg mag-r-5"></i>{{v.table_count}}</p>
									</div>
								</div>
								<div class="bg-yellow pad-10 fff pad-t-5 pad-b-5 mag-b-10 empty item_content" v-else-if="v.is_use == '0'">
									<div class="">
										<p class="ellipsis">{{v.table_name}}</p>
										<p><i class="bg mag-r-5"></i>{{v.table_count}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--底部-->
				<div class="childFooter bg-fff pad-l-20 pad-r-20 f-12">
					<div class="fiex childFooterWrap">
						<div class="footerList pad-t-10" @click="footJum('queue_takeNumber.html')">
							<div class="bg bg_01"></div>
							<div class="center">取号</div>
						</div>
						<div class="footerList pad-t-10" @click="footJum('queue_callNumber.html')">
							<div class="bg bg_02"></div>
							<div class="center">叫号</div>
						</div>
						<div class="footerList pad-t-10 active" @click="footJum('queue_tableStatus.html')">
							<div class="bg bg_03"></div>
							<div class="center">桌位状态</div>
						</div>
						<div class="footerList pad-t-10" @click="footJum('queue_history.html')">
						<div class="footerList pad-t-10" @click="gotoart('queue_takeNumber.html')">
							<div class="bg bg_01"></div>
							<div class="center">取号</div>
						</div>
						<div class="footerList pad-t-10" @click="gotoart('queue_callNumber.html')">
							<div class="bg bg_02"></div>
							<div class="center">叫号</div>
						</div>
						<div class="footerList pad-t-10 active" @click="gotoart('queue_tableStatus.html')">
							<div class="bg bg_03"></div>
							<div class="center">桌位状态</div>
						</div>
						<div class="footerList pad-t-10" @click="gotoart('queue_history.html')">
							<div class="bg bg_04"></div>
							<div class="center">历史</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//头部返回键
		function backpre () {
			if(isAPP) {
				var preUrl = plus.webview.currentWebview().opener();
				preUrl.evalJS("refresh()");
			}
			com_back();
		}
		//下拉刷新
		function refresh () {
			app.init();
		}
		
		
		console.log(table)
		var app = null;
		function fun1 () {
			var table = JSON.parse(getItem("table"));
			
			down_load(); //下拉刷新开启
			app = new Vue({
				el:"#app",
				data:{
					table:""
				},
				created: function () {
					common_ajax(1, {"id":63}, "get_queue_log_info", function(res) {
									if (res.status == 1) {
										console.log(res)
									}
								})
				},
				methods:{
					init: function () {
						common_ajax(1, {}, "get_table_working", function(res) {
							if (res.status == 1) {
								console.log(res)
								//正在用餐的桌号id
								var table_list_used = [];
								$.each(res.result.list, function(i,v) {
									table_list_used.push(i)
								});
								console.log(table_list_used);
								//全部的桌号id
								var table_list = [];

								$.each(table, function(i,v) {
									console.log(v["list"])
									var num = 0;
									$.each(v["list"], function(index,value) {
										if (table_list_used.indexOf(value["id"]) == -1) {
											value["is_use"] = 0;//0为未占用
											num ++;
										}else{
											value["is_use"] = 1;//1为占用
										}
									});
									v['num'] = num;
								});
								app.table = table;
							}
						});
					},
					gotoart: function (e) {
						clicked(e)
					},
					footJum: function (e) {
						if(isAPP) {
							clicked(e);
							var ws = plus.webview.currentWebview();
							plus.webview.close(ws.id, false);
						}else {
							clicked(e);
						}
					}
				}
			})
		}
	</script>
</html>
